<template>
  <!-- 选择主机弹框，父组件-->
  <el-dialog :title="formTitle" :visible.sync="hostsVisible" width="700px"
             :close-on-click-modal="false" @close="chooseClosed">
    <div class="hawk-transfer">
      <!-- v-if="hostsVisible"为false时tablePannel调用table下index文件调用了beforeDestroy方法 -->
      <table-pannel v-if="hostsVisible" type="all" :businessId="businessId" @closeChooseHostDlg='hostsVisible = false'
                    ref="allHost" key="allhost"></table-pannel>

      <div class="btnList">
        <el-button class="btn" @click="addHost">
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>

        <el-button class="btn" @click="delHost">
          <i class="el-icon-arrow-left el-icon--left"></i>
        </el-button>
      </div>

      <table-pannel v-if="hostsVisible" type="choosed" :businessId="businessId" @closeChooseHostDlg='hostsVisible = false'
                    ref="addHost" key="addHost"></table-pannel>
                    
    </div>
    <!-- 底部区 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="hostsVisible = false">取 消</el-button>
      <el-button type="primary" @click="updateBunisessHosts()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import tablePannel from './tablePannel.vue'

export default {
  components: { tablePannel },
  data () {
    return {
      formTitle: '选择主机',
      hostsVisible: false,
      businessId: 0, // 业务系统ID
    }
  },
  methods: {

    open (id) {
      this.hostsVisible = true
      this.businessId = id
      this.$nextTick(() => {
        this.$refs.addHost.init(id)
        this.$refs.allHost.init(id)
      })

    },
    chooseClosed () {
      // this.$refs.addHost.empty()
      // this.hostsVisible = false
    },
    async updateBunisessHosts () {
     let ret = await this.$refs.addHost.updateBunisessHosts()

     console.log(ret);
     this.hostsVisible = false
      // this.$forceUpdate();
      this.$parent.init()
    },

    // 添加主机，从左移到右
    addHost () {
      this.$refs.allHost.addHost()

      // setTimeout(() => {
      //   this.$refs.addHost.init(this.businessId)
      //   this.$refs.allHost.init(this.businessId)
      //   this.$emit('repeatInit')
      // }, 500)
    },

    delHost () {
      this.$refs.addHost.delHost()

      // setTimeout(() => {
      //   this.$refs.addHost.init(this.businessId)
      //   this.$refs.allHost.init(this.businessId)
      //   this.$emit('repeatInit')
      // }, 500)
    },
  },
}
</script>

<style lang="less" scoped>
.hawk-transfer {
  display: flex;
  justify-content: space-between;
  .tablePannel {
    border: 1px solid #f5f5f5;
    height: 610px;
    width: 300px;
    border-radius: 6px;
  }
  .btnList {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .btn {
      width: 40px;
      height: 30px;
      margin-bottom: 20px;
      margin-left: 0px !important;
    }
  }
}
</style>
